.<template>
    <div class="container">
        <div class="header">
            <img class="header-img" v-if="props.type==800" src="@/assets/images/running-header-800.png" />

            <img class="header-img" v-else src="@/assets/images/running-header.png" />

            <div class="header-title">{{props.type}}米-{{homeActive==1?'测试':'练习'}}</div>
            <!-- <div class="header-type">{{homeActive==1?'测试':'练习'}}</div> -->
            <img class="header-star" src="@/assets/images/star.png" />
        </div>
        <div class="content">
            <div class="content-left">
                <div v-for="(item,index) in list" :key="item">
                    <template v-if="item.type==1">
                        <div class="content-left-item">
                            <div class="content-left-item-num">{{index+1}}号</div>
                            <div class="content-left-item-status">空闲中</div>
                            <img class="content-left-item-ic" src="@/assets/images/show-hands.png" />
                            <div class="content-left-item-type">举手识别</div>
                        </div>
                    </template>
                    <template v-if="item.type==2">
                        <div class="content-left-item">
                            <div class="content-left-item-num">{{index+1}}号</div>
                            <div class="content-left-item-name">{{item?.user?.xsName}}</div>
                            <img class="content-left-item-head" :src="item?.user?.xsZp" />
                            <div class="content-left-item-class">{{ item?.user?.bjName }}</div>
                            <div class="content-left-item-type">等待中</div>
                        </div>
                    </template>
                    <template v-if="item.type==3">
                        <div class="content-left-item">
                            <div class="content-left-item-num">{{index+1}}号</div>
                            <div class="content-left-item-name">{{item?.user?.xsName}}</div>
                            <img class="content-left-item-head" :src="item?.user?.xsZp" />
                            <div class="content-left-item-class">{{ item?.user?.bjName }}</div>
                            <div class="content-left-item-type">测试中</div>
                        </div>
                    </template>
                    <template v-if="item.type==4">
                        <div class="content-left-item">
                            <div class="content-left-item-num">{{index+1}}号</div>
                            <div class="content-left-item-name">{{item?.user?.xsName}}</div>
                            <img class="content-left-item-head" :src="item?.user?.xsZp" />
                            <div class="content-left-item-class">{{ item?.user?.bjName }}</div>
                            <div class="content-left-item-type">完成</div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="content-right">
                <div class="content-right-empty" v-if="status ==1 | status ==2">
                    <img src="@/assets/images/empty.png" />
                    <div>暂无人测试</div>
                </div>
                <div class="content-right-list" v-if=" status ==3">
                    <template v-for="(item,index) in list" :key="item">
                        <div class="content-right-list-item" v-if="item.user">
                            <div class="content-right-list-item-num" v-if="item.type==4">{{index+1}}</div>
                            <img class="content-right-list-item-head" :src="item.user?.xsZp" />

                            <div class="content-right-list-item-name">{{  item.user.xsName}}</div>
                            <img class="content-right-list-item-sex" src="@/assets/images/ranking-m.png" />
                            <!-- <img class="content-item-info-row-sex" src="@/assets/images/ranking-w.png" /> -->
                            <div class="content-right-list-item-class">{{ item.user.bjName }}</div>
                            <div class="content-right-list-item-time" v-if="item.type==4">{{form.seconds }}秒</div>
                            <div class="content-right-list-item-score" v-if="item.type==4">{{form.score  }}</div>
                        </div>
                    </template>
                </div>

            </div>

        </div>
        <div class="footer" v-if="homeActive==1">
            <div class="footer-start" :style="{opacity:status==3?0.4:1}" @click="handleStart">
                <img src="@/assets/images/running-start.png" />
                <div>发令</div>
            </div>
            <div class="footer-end">
                <img src="@/assets/images/running-end.png" />
                <div>结束</div>
            </div>
        </div>
   <Ranking v-if="rankingVisible" @close="rankingVisible=false" />
    </div>

</template>
<script setup name="Running">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { tcsjOrig } from '@/api/tc/plan.js'

const props = defineProps({
    type: {
        type: Number,
        default: 50 //50男女通用  800女  1000男
    }
})
const userStore = useUserStore();
const { homeActive } = storeToRefs(userStore)
const { proxy } = getCurrentInstance();
const router = useRouter();
const type = ref(1);
const list = ref([{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 },]);
const index = ref(0);
let timer;
const status = ref(1);
const userList = ref([]);
const seconds = ref(0);
const form = ref({});
const rankingVisible = ref(false);


defineExpose({
    init, resetData
})

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

let timeout;
/**
 * 开始
 */
function handleStart() {
    list.value[0].type = 3;
    status.value = 3;
    timeout = setTimeout(() => {
        submit();
    }, 7000)
}

function formatSprintTime(ms, { hundredths = true, round = true } = {}) {
  if (ms == null || isNaN(ms)) return "00:00";
  ms = Math.max(0, Number(ms));
  let seconds = Math.floor(ms / 1000);

  if (hundredths) {
    // 百分之一秒（两位）
    let cs = round ? Math.round((ms % 1000) / 10) : Math.floor((ms % 1000) / 10);
    // 当四舍五入结果等于 100 时进位到下一秒
    if (cs >= 100) { cs = 0; seconds += 1; }
    return String(seconds).padStart(2, "0") + ":" + String(cs).padStart(2, "0");
  } else {
    // 毫秒（三位）
    let ms3 = round ? Math.round(ms % 1000) : Math.floor(ms % 1000);
    if (ms3 >= 1000) { ms3 = 0; seconds += 1; }
    return String(seconds).padStart(2, "0") + ":" + String(ms3).padStart(3, "0");
  }
}


function handleEnd() {
    status.value = 1;
    userList.value = [];
    list.value = [{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 },]
}

function submit() {
   
    let  seconds  = randomInt(5000, 10000);
    form.value = {
        seconds :formatSprintTime(seconds ),
        value:  (seconds / 1000).toFixed(2),
        score: randomInt(40, 100)
    }
            console.log("🚀 ~ submit ~ formatSprintTime(seconds ):",   form.value )

    list.value[0].type = 4;

    proxy.$modal.msgSuccess("成绩提交成功，5秒后返回");
    tcsjOrig({
        sjXsid: list.value[0].user.id,//学生id
        sjXxid: list.value[0].user.xsSchool,//学校id
        sjNj: list.value[0].user.xsNj,//年级
        sjFs: form.value.score, //分数
        sjDfsz: form.value.value, //得分数值
        sjTcxmid: 2, //50跑

    }).then(res => {
 
    })
    setTimeout(() => {
        userList.value = [];
        list.value = [{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 },]
        form.value = {};
        status.value = 1;
    }, 5000)
}

function resetData() {
    type.value = 1;

    list.value = [{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }];
    index = ref(0);

    status.value = 1;
    userList.value = [];
    seconds.value = 0;
    form.value = {};

    if (timer) {
        clearInterval(timer);
        timer = null;
    }

    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
}

function init(val) {
    if (!val) return;
    userList.value.push(val);
    console.log("🚀 ~ init ~ val:", val)
    status.value = 2;
    switch (userList.value.length) {
        case 1:
            list.value[0]['user'] = val;
            list.value[0].type = 2;
            break;
        case 2:
            break;
        case 3:
            break;
        case 4:
            break;
        case 5:
            break;
    }
    type.value = 2;
    // proxy.$modal.msgSuccess("预备开始");
    // setTimeout(() => {
    //     submit();

    // }, 3000)
}



</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.footer {
    position: absolute;
    left: 791px;
    top: 977px;
    width: 344px;
    height: 72px;
    border-radius: 10px;

    background: linear-gradient(
        282deg,
        rgba(63, 23, 177, 0.4) -6%,
        rgba(63, 23, 177, 0.4) -6%,
        rgba(163, 82, 255, 0.4) 35%,
        rgba(56, 66, 255, 0.4) 65%,
        rgba(0, 206, 255, 0.4) 99%
    );

    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    &-start {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 162px;
        height: 53px;
        border-radius: 6px;

        background: #236be7;
        &:hover {
            opacity: 0.8;
        }
        img {
            width: 45px;
            height: 38px;
        }
        div {
            font-family: YouSheBiaoTiHei;
            font-size: 36px;
            line-height: 28px;
            letter-spacing: 0.04em;
            color: #f3d500;
        }
    }
    &-end {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 162px;
        height: 53px;
        border-radius: 6px;
        background: #236be7;
        &:hover {
            opacity: 0.8;
        }
        img {
            width: 45px;
            height: 38px;
        }
        div {
            font-family: YouSheBiaoTiHei;
            font-size: 36px;
            line-height: 28px;
            letter-spacing: 0.04em;
            color: #ff7300;
        }
    }
}

.header {
    position: absolute;
    width: 680px;
    right: 120px;
    top: 17px;

    &-img {
        width: 388px;
        height: 388px;
    }
    &-title {
        position: absolute;
        top: 170px;
        right: 20px;
        font-family: YouSheBiaoTiHei;
        font-size: 80px;

        line-height: 58px;
        letter-spacing: 0.04em;
        font-variation-settings: "opsz" auto;
        color: #f3d500;
    }
    &-type {
        position: absolute;
        top: 182px;
        right: 20px;
        width: 100px;
        height: 44px;
        border-radius: 4px;

        display: flex;
        justify-content: center;
        align-items: center;
        background: #f3d500;
        color: #333;
    }
    &-star {
        position: absolute;
        top: 160px;
        right: 0px;
        width: 16px;
        height: 24px;
    }
}
.content {
    position: relative;
    display: flex;
    margin: 289px 100px 0 100px;
    width: 1720px;
    height: 668px;

    z-index: 2;
    &-left {
        display: flex;
        flex-wrap: wrap;
        width: 850px;
        height: 100%;
        gap: 3px;
        overflow: hidden;

        &-item {
            width: 210px;
            height: 336px;
            border-radius: 10px;
            opacity: 1;
            background: #236be7;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            &-label {
                margin-top: 20px;

                font-size: 40px;
                color: #fff;
            }

            &-value {
                margin-top: 50px;

                font-size: 100px;
                color: #fff;
            }
            &-seconds {
                position: absolute;
                left: 58 px;
                bottom: 68px;
                width: 210px;
                height: 62px;
                border-radius: 139px;

                background: #029649;

                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                color: #ffffff;
            }
            &-class {
                display: flex;
                justify-content: center;
                overflow: hidden;
                margin-top: 17px;
                width: 300px;
                font-size: 30px;
                color: #fff;
            }
            &-head {
                margin-top: 17px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }

            &-name {
                margin-top: 15px;
                font-size: 30px;
                color: #ffffff;
            }

            &-num {
                margin-top: 24px;
                font-size: 30px;
                color: #ffffff;
            }
            &-status {
                margin-top: 17px;
                font-size: 30px;
                color: #ffffff;
            }

            &-ic {
                margin-top: 22px;
                width: 50px;
                height: 99px;
            }

            &-type {
                position: absolute;
                left: 17px;
                bottom: 20px;
                width: 176px;
                height: 46px;
                border-radius: 23px;
                background: #1b56bc;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                color: #ffffff;
            }
        }
    }
    &-right {
        margin-left: 3px;
        width: 854px;
        height: 670px;
        border-radius: 10px;
        background: #1b52b2;
        overflow: hidden;

        &-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 6px;
            box-sizing: border-box;
            &-item {
                width: 100%;
                height: 78px;
                display: flex;
                align-items: center;
                position: relative;
                background: #236be7;
                &-score {
                    right: 20px;
                    position: absolute;
                    font-family: Alimama ShuHeiTi;
                    font-size: 40px;
                    font-weight: bold;
                    line-height: 40px;
                    letter-spacing: 0.04em;
                    color: #ff9a00;
                    &::after {
                        font-size: 20px;
                        color: #fff;
                        content: "分";
                    }
                }

                &-time {
                    width: 180px;
                    height: 48px;
                    background: #03c25f;
                    background: #ff9a00;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 600;
                    /* 左上和右下分别斜切：可以按需调整百分比 */
                    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
                    border-radius: 6px;
                }
                &-class {
                    color: #ffffff;
                    font-size: 30px;
                    width: 230px;
                    margin-left: 30px;
                }
                &-sex {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                }
                &-name {
                    color: #ffffff;
                    font-size: 30px;
                    width: 100px;
                    margin-left: 16px;
                }
                &-head {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    margin-left: 70px;
                }

                &-num {
                    left: 20px;
                    position: absolute;
                    font-family: Alimama ShuHeiTi;
                    font-size: 40px;
                    font-weight: bold;
                    line-height: 40px;
                    letter-spacing: 0.04em;
                    color: #ff9a00;
                }
            }
        }

        &-empty {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #236be7;
            img {
                width: 132px;
                height: 132px;
            }
            div {
                font-size: 32px;
                color: #fff;
                margin-top: 20px;
            }
        }
    }
}
</style>

